<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="UTF-8" />
    <title>Text - Basic</title>
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"
    />
    <link href="../../../../../css/ionic.bundle.css" rel="stylesheet" />
    <link href="../../../../../scripts/testing/styles.css" rel="stylesheet" />
    <script src="../../../../../scripts/testing/scripts.js"></script>
    <script nomodule src="../../../../../dist/ionic/ionic.js"></script>
    <script type="module" src="../../../../../dist/ionic/ionic.esm.js"></script>
  </head>

  <body>
    <ion-app>
      <ion-header>
        <ion-toolbar>
          <ion-title>Text - Basic</ion-title>
        </ion-toolbar>
      </ion-header>

      <ion-content class="ion-padding" id="content">
        <ion-text color="secondary">
          <h1>H1: The quick brown fox jumps over the lazy dog</h1>
        </ion-text>

        <ion-text color="primary">
          <h2>H2: The quick brown fox jumps over the lazy dog</h2>
        </ion-text>

        <ion-text color="light">
          <h3>H3: The quick brown fox jumps over the lazy dog</h3>
        </ion-text>

        <ion-text color="danger">
          <h4>H4: The quick brown fox jumps over the lazy dog</h4>
        </ion-text>

        <ion-text color="dark">
          <h5>H5: The quick brown fox jumps over the lazy dog</h5>
        </ion-text>

        <ion-text id="dynamicColor">
          <h6>H6: The quick brown fox jumps over the lazy dog</h6>
        </ion-text>

        <p>
          I saw a werewolf with a Chinese menu in his hand. Walking through the
          <ion-text color="danger">
            <sub>streets</sub>
          </ion-text>
          of Soho in the rain. He
          <ion-text color="primary">
            <i>was</i>
          </ion-text>
          looking for a place called Lee Ho Fook's. Gonna get a
          <ion-text color="secondary">
            <a>big dish of beef chow mein.</a>
          </ion-text>
          <a class="color-purple">My purple class link.</a>
        </p>

        <p>
          He's the hairy-handed gent who ran amuck in Kent. Lately he's
          <ion-text color="primary">
            <sup>been</sup>
          </ion-text>
          overheard in Mayfair. Better stay away from him. He'll rip your lungs out, Jim. I'd like to meet his tailor.
          <ion-text color="danger">
            <ion-icon name="cut"></ion-icon>
          </ion-text>
        </p>
      </ion-content>
    </ion-app>

    <style>
      .color-purple {
        color: purple;
      }
    </style>

    <script>
      var dynamicColor = document.getElementById('dynamicColor');
      dynamicColor.color = 'secondary';
    </script>
  </body>
</html>
